<template>
	<w-container class='page-bg order-list' :class='{batch:currentType==2}'>
		<w-navbar navType="default" id="my-nav" title="我的拼团"></w-navbar>
		<!-- <u-sticky> -->
			<!-- <u-tabs :current='currenIndex' :list="orderMap"  @click='changOrderStatus'></u-tabs> -->
			
		<!-- </u-sticky> -->
		<w-tabs scrollable line-width="0" :activeStyle="{color:'#B91223'}" :current='currenIndex' :tabList="orderMap" @change="changOrderStatus"></w-tabs>
		<view class="order-list-container pa-16">
			<OrderItem class='mb-12' v-for="item in list" :key="item.order_sn" :order='item'
				@countDownOver='countDownOver'></OrderItem>
		</view>

		<w-loading :type="loading" emptyType="order" emptyTop="100"></w-loading>
		<w-modal v-model="showCancel" @action='submitCancel'>
			<view class="">
				<view class="text-center ptb-20 font-color-dark font-w-500">
					{{handleLang('您确定要取消该批付订单吗？')}}
				</view>
				<view class="font-size-12">
					{{handleLang('1.取消订单将会限制一段时间使用批量购买功能')}}
				</view>
				<view class="font-size-12">
					{{handleLang('}2.累计取消3次将永久限制使用批量购买功能')}}
				</view>	
			</view>
		</w-modal>
		
		
		<w-toast v-model="showToast" :title="handleLang('温馨提示')" :content="handleLang('您还有未支付订单,是否立即支付')" content-align="center" @action='payHasBatchOrder'></w-toast>
	</w-container>
</template>

<script>
	import OrderItem from './components/orderItem.vue'
	import {
		getOderList,
		getBatchOrderList,
		createBatchPayOrder,
		cancelBatchOrder
	} from '@/api/order/index.js'
	import PayTypeRadio from './components/payTypeRadio.vue'
	import BatchOrderList from './components/batchOrderList'
	import payUtil from '@/utils/payUtil.js'
	import {
		mapState,
		mapActions
	} from 'vuex'
	import dayjs from 'dayjs'
	export default {
		components: {
			OrderItem,
			PayTypeRadio,
			BatchOrderList
		},
		data() {
			return {
				showToast:false,
				showCancel:false,
				orderMap: [
					{
						name: '全部',
						status: 0,
						type: 1
					},{
						name: '待支付',
						status: 1,
						type: 1
					},
					{
						name: '已参与',
						type: 1,
						status: 7
					},
					{
						name: '已完成',
						status: 2,
						type: 1
					},
					
				],
				loading: 'none',
				inactiveStyle: {
					color: '#7a7a7a',
					fontSize: "28rpx"
				},
				activeStyle: {
					color: '#DF0007',
					fontSize: "32rpx"
				},
				currentType: 1,
				batchPayWay: 'huifu',
				search: {
					page: 1,
					status: 0,
					is_group_buy:1
				},
				list: [],
				batchInfo: {},
				hasBatchOrder:{}
			}
		},
		computed: {
			...mapState('config', ['nowTimestamp']),
			
			currenIndex() {
				return this.orderMap.findIndex(v => v.status == this.search.status && this.currentType == v.type)
			},
			cuurentBatchList() {
				if (this.currentType == 1) return []
				return this.list.filter(v => {
					return v.income_type.includes(this.batchPayWay)
				})
			},
			checkIds() {
				let list = this.cuurentBatchList.filter(v => v.check).map(v => v.id)
				return list
			},
			countdown() {
				const startTime = dayjs(this.nowTimestamp);
				const endTime = dayjs(this.batchInfo.endtime * 1000);

				const diffInMs = endTime.diff(startTime); // 获取时间差异（毫秒）

				const diffInSeconds = diffInMs / 1000; // 将毫秒转换为秒

				const diffInMinutes = Math.floor(diffInSeconds / 60); // 获取差异的分钟数

				const diffInRemainingSeconds = Math.floor(diffInSeconds % 60); // 获取剩余的秒数	
				return `剩余${diffInMinutes}分${diffInRemainingSeconds}秒`
			}
		},
		onLoad() {
			let orderList=uni.getStorageSync('order-list')
			if(orderList){
				let {type,status}=orderList;
				this.currentType=type;
				this.search.status=status;
				uni.removeStorageSync('order-list')
			}
			// this.changOrderStatus(this.orderMap[this.currenIndex]);
			this.createNowTimeTimer();
		},
		onShow() {
			this.changOrderStatus(this.orderMap[this.currenIndex]);
		},
		onPullDownRefresh() {
			this.changOrderStatus(this.orderMap[this.currenIndex]);
		},
		onReachBottom() {
			this.loadMore()
		},
		methods: {
			...mapActions('config', ['createNowTimeTimer']),
			submitCancel(res){
				if(!res) return;
				cancelBatchOrder({
					batch_order_id:this.batchInfo.batch_order_id
				}).then(data=>{
					uni.showToast({
						icon:'success',
						title:"取消成功"
					})
					this.changOrderStatus(this.orderMap[this.currenIndex]);
				})
			},
			changeStatus(item){
				
				item.check=!item.check;
				let index=this.list.findIndex(v=>v.id==item.id);
				this.$set(this.list,index,item)
			},
			countDownOver({
				id
			}) {
				uni.showToast({
					title: '订单超时，已取消',
					icon: 'none'
				})
				let index = this.list.findIndex(v => v.id == id);
				if (this.search.status == 1) {
					this.list.splice(index, 1)
				} else {
					if(this.list[index].order_status == 1) this.$set(this.list[index], 'order_status', 3)
					if(this.list[index].order_status == 7) this.$set(this.list[index], 'order_status', 6)
				}
			},
			//
			payHasBatchOrder(e){
				if(e){
					this.payBatchOrder(this.hasBatchOrder);
				}
			},
			//创建批付订单
			createPayOrder(){
				createBatchPayOrder({
					order_ids:this.checkIds.join(','),
					batch_order_id:this.batchInfo.batch_order_id,
					pay_way:this.batchPayWay
				}).then(res=>{
					if(res.data.order_type){
						this.showToast=true;
						this.hasBatchOrder=res.data;
					}else{
						this.payBatchOrder(res.data);
					}
				})
			},
			payBatchOrder(data){
				new payUtil({
					order_number:data.order_sn,
					order_id:data.order_id,
					order_type:10,
					pay_way:this.batchPayWay,
					pay_type:4
				})
			},
			
			changOrderStatus({
				status,
				type
			}) {
				this.currentType = type;
				this.list = []
				this.search.status = status
				this.search.page = 1
				this.getList(this.search)
			},
			loadMore() {
				let search = this.$tools.copyObj(this.search);
				search.page++
				this.getList(search)
			},
			getList(search) {
				if (this.loading == 'loading') return;
				this.loading = 'loading'
				getOderList(search).then(res => {
					this.loading = 'none'
					if (res.data.total == 0) {
						this.loading = 'empty'
					}
					if (res.data.data.length) {
						res.data.data.map(v => {
							this.$set(this.list, this.list.length, v);
						})
						this.search = search;
					}
				}).finally(() => {
					uni.stopPullDownRefresh()
				})
			},
			setBatchFilterPayWay() {
				if (this.list[0]) {
					this.batchPayWay = this.list[0].income_type[0]
				}
			}
		}
	}
</script>

<style lang="scss">
	.batch.order-list{
		padding-bottom: calc(56rpx + 92rpx + env(safe-area-inset-bottom));
	}
	.order-list {
		/deep/ .u-tabs__wrapper__nav__item {
			flex-grow: 1;
		}

		/deep/ .u-tabs__wrapper__nav {
			// background-image: url($IMG_URL + '/static/bg/my-bg.png');
			background-size: 100% auto;
			background-position: top;
		}

		&-container {}

		.batch-action {
			position: fixed;
			left: 0;
			bottom: 0;
			@extend .bg-color-white;
			width: 750rpx;
			padding-bottom: calc(28rpx + env(safe-area-inset-bottom));
		}
	}
</style>
